<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <title>主页</title>
    <link rel="icon" href="favicon.ico" type="image/ico">
    <link th:href="@{/layer/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/layer/css/materialdesignicons.min.css}" rel="stylesheet">
    <link th:href="@{/layer/css/style.min.css}" rel="stylesheet">
    <link th:href="@{/layer/css/pagination.css}" rel="stylesheet">
    <link th:href="@{/admin/css/department.css}" rel="stylesheet">
</head>

<body>
    <div class="lyear-layout-web">
    <div class="lyear-layout-container">
        <!--左侧导航-->
        <div th:insert="components/aside"></div>
        <!--End 左侧导航-->
        <!--头部信息-->
        <div th:insert="components/header"></div>
        <!--End 头部信息-->
        <!--页面主要内容-->
        <main class="lyear-layout-content">
            <div id="department" v-cloak>
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="card">
                                <div class="card-toolbar clearfix">
                                    <div class="pull-right search-bar" method="get" action="#!" role="form">
                                        <div class="input-group" style="float: left;margin-top: 10px">
                                            <label class="lyear-switch switch-solid switch-Pink">
                                                <input type="checkbox" :checked="switchIcons" @click="getOfStatus">
                                                <span></span>
                                            </label>
                                        </div>
                                        <div class="input-group" style="margin-left: 50px">
                                            <div class="input-group-btn">
                                                <input type="hidden" name="search_field" id="search-field" value="title">
                                                <button class="btn btn-default dropdown-toggle" id="search-btn" data-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false">
                                                    <span  v-text="searchTitle"></span>&nbsp;<span class="caret"></span>
                                                </button>
                                                <ul class="dropdown-menu">
                                                    <li><a tabindex="-1" href="javascript:void(0)" @click="titleOfName" data-field="name">名称</a> </li>
                                                    <li><a tabindex="-1" href="javascript:void(0)" @click="titleOfAddress" data-field="address">地址</a> </li>
                                                </ul>
                                            </div>
                                            <input type="text" class="form-control" @keyup.enter="search" v-model="searchContent" name="keyword" placeholder="请输入名称">
                                        </div>
                                    </div>
                                    <div class="toolbar-btn-action">
                                        <a class="btn btn-primary m-r-5" href="#!" data-toggle="modal" data-target="#addModal" data-whatever="@mdo" ><i class="mdi mdi-plus"></i>新增</a>
                                        <a class="btn btn-info m-r-5" @click="reset"><i class="mdi mdi-rotate-3d"></i>重置</a>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div class="table-responsive">
                                        <table class="table table-bordered">
                                            <thead class="center" v-cloak>
                                                <tr>
                                                    <th class="col-lg-1">编号</th>
                                                    <th class="col-lg-2">名称</th>
                                                    <th class="col-lg-4">地址</th>
                                                    <th class="col-lg-2">状态</th>
                                                    <th class="col-lg-3">操作</th>
                                                </tr>
                                            </thead>
                                            <tbody class="center">
                                                <tr v-for="(dep,index) in departments">
                                                    <td v-text="index+startRow"></td>
                                                    <td v-text="dep.name"></td>
                                                    <td v-text="dep.address"></td>
                                                    <td>
                                                        <label class="lyear-switch switch-solid switch-cyan">
                                                            <input type="checkbox" @click="updStatus(dep.dep_id,dep.status)" :checked="dep.status==1?true:false">
                                                            <span></span>
                                                        </label>
                                                    </td>
                                                    <td>
                                                        <div class="btn-group">
                                                            <a class="btn btn-xs btn-default" href="#" @click="toUpd(dep)" data-toggle="modal" data-target="#updateModal" data-whatever="@mdo" data-original-title="编辑"><i class="mdi mdi-pencil"></i></a>
                                                            <a class="btn btn-xs btn-default" href="#" data-original-title="查看"><i class="mdi mdi-eye"></i></a>
                                                            <a class="btn btn-xs btn-default" href="#" title="" data-toggle="tooltip" data-original-title="删除"><i class="mdi mdi-window-close"></i></a>
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr v-if="(tip==''||tip==null)?false:true">
                                                    <td colspan="6">
                                                        <span style="font-size:14px;text-align:center;color: red" v-text="tip"></span>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                    <ul class="m-style" style="text-align: center" id="pagination">

                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--End 页面主要内容-->
                <div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content model">
                            <div class="modal-header">
                                <h4 class="modal-title" @click="updMessage" id="exampleModalLabel">修改信息</h4>
                            </div>
                            <div class="modal-body">
                                <form :model="updForm">
                                    <div class="form-group">
                                        <label for="updName" class="control-label">名称：</label>
                                        <input type="text" id="updName" v-model="updForm.updName" class="form-control">
                                    </div>
                                    <div class="form-group">
                                        <label for="updAddress" class="control-label">地址：</label>
                                        <input type="text" id="updAddress" v-model="updForm.updAddress" class="form-control">
                                    </div>
                                    <div class="form-group">
                                        <label for="updStatus" class="control-label">状态：</label>
                                        <div class="example-box" id="updStatus">
                                            <label class="lyear-radio radio-inline radio-primary">
                                                <input type="radio" name="updStatus" v-model="updForm.updStatus"  value="1"><span>启用</span>
                                            </label>
                                            <label class="lyear-radio radio-inline radio-primary">
                                                <input type="radio" name="updStatus" v-model="updForm.updStatus" value="0"><span>禁用</span>
                                            </label>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                <button type="button" @click="updMessage" data-dismiss="modal" class="btn btn-primary">修改信息</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content model" style="">
                            <div class="modal-header">
                                <h4 class="modal-title" id="lookModalLabel">部门添加</h4>
                            </div>
                            <div class="modal-body">
                                <form :model="addForm">
                                    <div class="form-group">
                                        <label for="addName" class="control-label">名称：</label>
                                        <input id="addName" type="text" v-model="addForm.addName" class="form-control">
                                    </div>
                                    <div class="form-group">
                                        <label for="addAddress" class="control-label">地址：</label>
                                        <input id="addAddress" type="text" v-model="addForm.addAddress" class="form-control">
                                    </div>
                                    <div class="form-group">
                                        <label for="updStatus" class="control-label">状态：</label>
                                        <div class="example-box" id="addStatus">
                                            <label class="lyear-radio radio-inline radio-primary">
                                                <input type="radio" name="addStatus" v-model="addForm.addStatus" value="1"><span>启用</span>
                                            </label>
                                            <label class="lyear-radio radio-inline radio-primary">
                                                <input type="radio" name="addStatus" v-model="addForm.addStatus" value="0"><span>禁用</span>
                                            </label>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                <button type="button" class="btn btn-primary"  data-dismiss="modal" @click="addMessage">添加部门</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
</div>

    <script type="text/javascript" th:src="@{/layer/js/jquery.min.js}"></script>
    <script type="text/javascript" th:src="@{/layer/js/bootstrap.min.js}"></script>
    <script type="text/javascript" th:src="@{/layer/js/lightyear.js}"></script>
    <script type="text/javascript" th:src="@{/layer/js/perfect-scrollbar.min.js}"></script>
    <script type="text/javascript" th:src="@{/layer/js/bootstrap-notify.min.js}"></script>
    <script type="text/javascript" th:src="@{/layer/js/jquery.pagination.js}"></script>
    <script type="text/javascript" th:src="@{/layer/js/main.min.js}"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script type="text/javascript" th:src="@{/layer/js/Chart.js}"></script>
    <script type="text/javascript" th:src="@{/admin/js/department.js}"></script>
</body>
</html>
